<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<title>浏览历史</title>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/base.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/header.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/history.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/public.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/attention.css"/>
	</head>
	<body>
		<div class="container">
			<div class="header">
				<span class="back" onclick="history.go(-1);"></span>
				<span class="header_text">浏览历史</span>
				<span class="header_tab" onclick="doDelAll();">清空</span>
			</div>
			<div class="content" id="historyList"></div>
		</div>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery/jquery-1.11.2.min.js"></script>
		<!-- amazeui -->
		<script type="text/javascript" src="${BASE_PATH}/static/ui/js/amazeui.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/template/template.js"></script>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/layer/layer.js"></script>
		<!-- app -->
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/kit.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/history.js"></script>
		<!-- tpl -->
		<script type="text/html" id="dataTpl">
			{{each list as goods}}
				<a href="${BASE_PASE}/goods/detail/{{goods.id}}">	
					<div class="att_goods">
						<span class="choose_dian"></span>
						<div class="att_goods_box">
							<img class="goods_pic" src="${FTP_PATH}{{goods.thumb}}"/>
							<span class="goods_name">{{goods.name}}</span>
							<span class="goods_pri">￥{{goods.itemPrice}}</span>
						</div>
					</div>
				</a>
			{{/each}}
		</script>
		<script type="text/javascript">
			$(function(){
				//读取本地保存的商品浏览记录，并倒置数组展示，以达到最近浏览的商品在上边的效果
				var list = History.get();
				if(list.length!=0){
					$("#historyList").append(template("dataTpl",{list:list.reverse()}));
				}
			});
			//清空浏览记录
			function doDelAll(){
			//	Kit.ui.confirm("确定要清空浏览历史吗？",function(){
					History.clear();
					$("#historyList").html("");
			//	});
			}
		</script>
	</body>
</html>
